<template>
	<div class="table-responsive">
		<button @click="helloJson">Click ME!!!</button>
		<table class="table table-striped table-sm table-hover">
			<thead>
				<tr>
					<th scope="col">行号</th>
					<th scope="col">ID</th>
					<th scope="col">名称</th>
					<th scope="col">电话</th>
					<th scope="col">创建时间</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(o, i) in list" :key="i">
					<td :class="{ 'bg-success': o.isOnline }">
						{{ (currentPageNo-1)*pageSize + (i+1) }}
					</td>
					<td>{{ o.id }}</td>
					<td>{{ o.username }}</td>
					<td>{{ o.tel }}</td>
					<td>{{ o.create_time }}</td>
				</tr>
			</tbody>
		</table>
		<page :page-size="pageSize" :data-count="dataCount" @pagechange="mypagechange"></page>
	</div>
</template>

<script>
module.exports = {
	data: function () {
		return {
			list: [],
			pageSize:2, //此处设置每页显示几行
			dataCount:0,
			currentPageNo:1
		}
	},
	components: {
        	'page': httpVueLoader('page.vue')
        },
	mounted: function () {
		this.mypagechange(1,this.pageSize);
	},

	methods: {
		helloJson() {
            $http.post('/joiTest/helloJson',{name:'12',id:'er'}).then(res => {
              console.log(res)
            })
          },
		queryAll() {
			$http.get('/userTel/queryAll').then(res => {
				this.list = res;
			})
		},
		mypagechange(currentPageNo, pageSize){
			//后台请求数据
			$http.get('/userTel/queryByPageAll?pageSize='+ pageSize + '&currentPageNo=' + currentPageNo).then(res => {
				this.list = res.data;
				this.currentPageNo = currentPageNo;
				this.dataCount = parseInt(res.count);
			})
		}

	}
}


</script>

<style>
</style>